<template>
  <a-modal
    v-model:visible="props.teacherShowble"
    width="50%"
    :title="(isBatchHasObj.tmbh || '') + (isBatchHasObj.tmbt || '') + '新增评阅教师'"
    @cancel="editCancel"
    @ok="editOk"
  >
    <a-form
      class="cancel-form"
      @submit="editOk"
      :rules="rules"
      ref="setForm"
      :model="editabDataChead"
    >
      <a-form-item label="已分配教师">
        <a-tag color="#2db7f5" v-for="item in hasTercherList">
          {{ item.jsxm }}({{ item.account }})
        </a-tag>
        <span v-if="!hasTercherList.length">--</span>
      </a-form-item>

      <a-form-item label="新增教师" name="distributeAccountList">
        <a-select
          v-model:value="editabDataChead.distributeAccountList"
          mode="multiple"
          placement="topLeft"
          :disabled="isBatchHasObj.sfzxdtdw && machineReadableProblem.includes(isBatchHasObj.tmlx)"
          :options="teacherOptions"
          :filter-option="filterOption"
          show-search
          placeholder="请选择（可按工号搜索）"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { machineReadableProblem } from '../index'
import { ref, watch } from 'vue'

// api
import { getHasTeachee } from '/@/api/organization/subjectManage'
import { distributePyJsFpSingle, reviewGetPySzInfoByStId } from '/@/api/examinationAudit'

import { useMessage } from '/@/hooks/web/useMessage'
const { createMessage } = useMessage()

// 表达校验提交
const setForm = ref()
function editOk() {
  setForm.value
    .validate()
    .then(async () => {
      let list = hasTercherList.value?.map(item => item.account) || []
      list = list.concat(editabDataChead.value.distributeAccountList)
      let { code, message } = await distributePyJsFpSingle({
        distributeAccountList: list,
        stId: props.isBatchHasObj.id,
        kmdm: props.kmdm,
      })
      if (code == 200) {
        createMessage.success('操作成功')
        editCancel()
        emit('successFun')
      } else {
        createMessage.error(message)
      }
    })
    .catch(err => console.error(err))
}

const emit = defineEmits(['update:teacherShowble', 'update:isBatchHasObj', 'successFun'])
const props = defineProps({
  isBatchHasObj: {
    type: Object,
    default: () => ({}),
  },
  teacherShowble: {
    type: Boolean,
    dafault: false,
  },
  kmdm: {
    type: String,
    default: '',
  },
})

const rules = {
  distributeAccountList: [{ required: true, message: '不能为空', trigger: 'blur' }],
}

// 提交表单
const editabDataChead = ref<any>({
  distributeAccountList: [],
})

// 机读题答案选择

watch(
  () => props.isBatchHasObj,
  async val => {
    if (!val.id) return
    let { code, data } = await reviewGetPySzInfoByStId({
      stId: val.id,
      kmdm: props.kmdm,
    })
    getTeacherOptions('')
    if (code == 200) {
      hasTercherList.value = data[0]?.pySzJsfpList || []
    }
  },
  { deep: true, immediate: true }
)

//查询可分配教师
const teacherOptions = ref<any[]>([])
const hasTercherList = ref<any[]>([])
const getTeacherOptions = async val => {
  let { code, data } = await getHasTeachee({
    kmdm: props.kmdm,
    jsxm: val,
  })
  if (code == 200) {
    teacherOptions.value = []
    for (let key in data) {
      teacherOptions.value.push({
        label: `${data[key]}(${key})`,
        value: key,
        disabled: hasTercherList.value.some(e => e.account == key),
      })
    }
  }
}

function filterOption(input: string, option: any = {}) {
  return option['label']?.indexOf(input) >= 0
}

/**
 * 关闭表单
 * */
function editCancel() {
  editabDataChead.value = {}
  emit('update:teacherShowble', false)
  emit('update:isBatchHasObj', {})
}
</script>

<style lang="less" scoped>
.cancel-form {
  padding: 20px 20px 20px 20px;
  height: 100%;
  overflow-y: auto;

  ::v-deep(.ant-table-cell) {
    .ant-form-item {
      margin-bottom: 0;
    }
  }
}

.cancel-form-item {
  flex-direction: column;
  ::v-deep(.ant-form-item-label) {
    text-align: left;
    padding: 0 0 8px;
    line-height: 1.5715;
    white-space: initial;
  }

  ::v-deep(.ant-form-item-control) {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: auto;
  }
}
</style>
